@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "@tailwindcss/typography";

@layer base {
  :root {
    /* 基础颜色 */
    --background: 0 0% 95.7%;
    --foreground: 240 10% 3.9%;

    /* 表面颜色 */
    --surface: 0 0% 100%;
    --surface-variant: 240 4.8% 95.9%;

    /* 文本颜色 */
    --text-primary: 240 10% 3.9%;
    --text-secondary: 217 19% 47%;
    --text-muted: 217 19% 47%;

    /* 边框和分割线 */
    --border: 214 32% 91%;
    --border-variant: 214 32% 91%;
    --divider: 214 32% 91%;

    /* 输入框 */
    --input: 214 32% 91%;
    --input-background: 0 0% 100%;

    /* 主色调 - 默认蓝色 */
    --primary: 243 76% 59%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 243 76% 54%;

    /* 次要色调 */
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 214 20% 65%;
    --secondary-hover: 240 4.8% 90%;

    /* 强调色 */
    --accent: 210 40% 96.08%;
    --accent-foreground: 215.9 16.3% 34.9%;
    --accent-hover: 210 40% 91%;

    /* 状态颜色 */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 98%;
    --error: 0 84.2% 60.2%;
    --error-foreground: 0 0% 98%;
    --info: 217 91% 60%;
    --info-foreground: 0 0% 98%;

    /* 遮罩和阴影 */
    --overlay: 0 0% 0%;
    --shadow: 0 0% 0%;

    /* 其他 */
    --muted: 210 40% 93%;
    --muted-foreground: 217 19% 47%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --ring: 243 76% 59%;
    --radius: 0.5rem;

    /* 主题切换过渡 */
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  /* 蓝色主题 - 默认 */
  :root,
  .theme-blue {
    --primary: 210 100% 63%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 210 100% 58%;
    --ring: 210 100% 63%;
  }

  /* 紫色主题 */
  .theme-purple {
    --primary: 262 83% 58%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 262 83% 53%;
    --ring: 262 83% 58%;
  }

  /* 绿色主题 */
  .theme-green {
    --primary: 142 76% 36%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 142 76% 31%;
    --ring: 142 76% 36%;
  }

  /* 红色主题 */
  .theme-red {
    --primary: 0 84% 60%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 0 84% 55%;
    --ring: 0 84% 60%;
  }

  /* 橙色主题 */
  .theme-orange {
    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 25 95% 48%;
    --ring: 25 95% 53%;
  }

  /* 粉色主题 */
  .theme-pink {
    --primary: 330 81% 60%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 330 81% 55%;
    --ring: 330 81% 60%;
  }

  /* 青色主题 */
  .theme-cyan {
    --primary: 199 89% 48%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 199 89% 43%;
    --ring: 199 89% 48%;
  }

  /* 靛青主题 */
  .theme-indigo {
    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 239 84% 62%;
    --ring: 239 84% 67%;
  }

  /* 翠绿主题 */
  .theme-emerald {
    --primary: 160 84% 39%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 160 84% 34%;
    --ring: 160 84% 39%;
  }

  /* 玫瑰主题 */
  .theme-rose {
    --primary: 346 77% 49%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 346 77% 44%;
    --ring: 346 77% 49%;
  }

  /* 暗色模式 */
  .dark {
    /* 基础颜色 */
    --background: 240 10% 4%;
    --foreground: 0 0% 98%;

    /* 表面颜色 */
    --surface: 240 6% 10%;
    --surface-variant: 240 4% 16%;

    /* 文本颜色 */
    --text-primary: 0 0% 98%;
    --text-secondary: 218 11% 65%;
    --text-muted: 218 11% 65%;

    /* 边框和分割线 */
    --border: 240 4% 16%;
    --border-variant: 240 4% 20%;
    --divider: 240 4% 16%;

    /* 输入框 */
    --input: 240 4% 16%;
    --input-background: 240 6% 10%;

    /* 次要色调 */
    --secondary: 215 14% 34%;
    --secondary-foreground: 240 5% 84%;
    --secondary-hover: 215 14% 39%;

    /* 强调色 */
    --accent: 240 4% 16%;
    --accent-foreground: 0 0% 98%;
    --accent-hover: 240 4% 21%;

    /* 状态颜色 */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 98%;
    --error: 0 72% 51%;
    --error-foreground: 0 0% 98%;
    --info: 217 91% 60%;
    --info-foreground: 0 0% 98%;

    /* 遮罩和阴影 */
    --overlay: 0 0% 0%;
    --shadow: 0 0% 0%;

    /* 其他 */
    --muted: 240 15% 20%;
    --muted-foreground: 218 11% 65%;
    --popover: 240 6% 10%;
    --popover-foreground: 0 0% 98%;
    --card: 240 6% 10%;
    --card-foreground: 0 0% 98%;
  }

  /* 暗色模式下的主题色彩 */
  .dark.theme-blue,
  .dark {
    --primary: 210 100% 68%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 210 100% 73%;
    --ring: 210 100% 68%;
  }

  .dark.theme-purple {
    --primary: 262 80% 65%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 262 80% 70%;
    --ring: 262 80% 65%;
  }

  .dark.theme-green {
    --primary: 142 70% 45%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 142 70% 50%;
    --ring: 142 70% 45%;
  }

  .dark.theme-red {
    --primary: 0 75% 65%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 0 75% 70%;
    --ring: 0 75% 65%;
  }

  .dark.theme-orange {
    --primary: 25 90% 60%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 25 90% 65%;
    --ring: 25 90% 60%;
  }

  .dark.theme-pink {
    --primary: 330 75% 65%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 330 75% 70%;
    --ring: 330 75% 65%;
  }

  .dark.theme-cyan {
    --primary: 199 85% 55%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 199 85% 60%;
    --ring: 199 85% 55%;
  }

  .dark.theme-indigo {
    --primary: 239 80% 70%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 239 80% 75%;
    --ring: 239 80% 70%;
  }

  .dark.theme-emerald {
    --primary: 160 80% 45%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 160 80% 50%;
    --ring: 160 80% 45%;
  }

  .dark.theme-rose {
    --primary: 346 70% 55%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 346 70% 60%;
    --ring: 346 70% 55%;
  }
}

html {
  -webkit-font-feature-settings: 'kern' 1;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

*:focus {
  outline: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

ul {
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.6;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--transition-theme);
}

input,
textarea,
[contenteditable='true'],
.markdown,
#messages,
.selectable,
pre,
code {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

a {
  -webkit-user-drag: none;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
}

.app-draggable {
  -webkit-app-region: drag;
  cursor: pointer;
}
.app-draggable__disabled {
  -webkit-app-region: no-drag;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

::-webkit-scrollbar-thumb:active {
  background: transparent;
}
